<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>使用HTML DOM操作表格</title>
	<style type="text/css">
		body {
			font-size: 13px;
			line-height: 25px;
		}

		table {
			border-top: 1px solid #333;
			border-left: 1px solid #333;
			width: 300px;
		}

		td {
			border-right: 1px solid #333;
			border-bottom: 1px solid #333;
		}

		.center {
			text-align: center;
		}

		.title {
			text-align: center;
			font-weight: bold;
			background-color: #cccccc;
		}
	</style>
	<script type="text/javascript">
		function addRow() {
			var lengths = document.getElementById("myTable").rows.length;
			var index;
			if (lengths >= 2) {
				index = 2;
			}
			else {
				index = 1;
			}
			var newRow = document.getElementById("myTable").insertRow(index);
			var col1 = newRow.insertCell(0);
			col1.innerHTML = "幸福从天而降";
			var col2 = newRow.insertCell(1);
			col2.innerHTML = "&yen;18.5";
			col2.align = "center";
		}

		function updateRow() {
			var uRow = document.getElementById("myTable").rows[0];
			uRow.className = "title";
		}

		function delRow() {
			document.getElementById("myTable").deleteRow(1);
		}
	</script>
</head>

<body>
	<table border="0" cellspacing="0" cellpadding="0" id="myTable">
		<tr id="row1">
			<td>书名</td>
			<td>价格</td>
		</tr>
		<tr id="row2">
			<td>看得见风景的房间</td>
			<td class="center">&yen;30.00</td>
		</tr>
		<tr id="row3">
			<td>60个瞬间</td>
			<td class="center">&yen;32.00</td>
		</tr>
	</table>
	<input name="b1" type="button" value="增加一行" onclick="addRow()" />
	<input name="b2" type="button" value="删除第2行" onclick="delRow()" />
	<input name="b3" type="button" value="修改标题" onclick="updateRow()" />
</body>

</html>